Lazy Loading এবং Asynchronous Loading

Web Development - গুগল ম্যাপ (Google Maps) - Google Maps API এর Performance Optimization

157

Google Maps API ব্যবহার করে ওয়েবসাইটে মানচিত্র ইন্টিগ্রেট করা হয়, তবে বড় ওয়েব পেজগুলিতে মানচিত্রের লোডিং সময় কিছুটা ধীর হতে পারে, বিশেষ করে যদি একাধিক মানচিত্র থাকে। এই সমস্যার সমাধান হিসেবে Lazy Loading এবং Asynchronous Loading দুটি কৌশল ব্যবহার করা যেতে পারে। এই কৌশলগুলি আপনার ওয়েবসাইটের পারফরম্যান্স উন্নত করতে এবং মানচিত্র দ্রুত লোড করতে সহায়তা করে।

Lazy Loading

Lazy Loading একটি কৌশল যেখানে যেসব উপাদান ব্যবহারকারীর স্ক্রিনে দৃশ্যমান হয় না, সেগুলি তখনই লোড হয় যখন সেগুলি স্ক্রিনে আসে। মানচিত্রের ক্ষেত্রে, এটি সাধারণত একটি নির্দিষ্ট এলাকা বা স্ক্রিনে ক্লিক করার পর মানচিত্র লোড করা হয়।

Lazy Loading এর মাধ্যমে আপনি শুধুমাত্র তখনই Google Maps লোড করতে পারবেন যখন ব্যবহারকারী মানচিত্রটি দেখতে চাইবেন। এতে পেজের লোডিং সময় কমে যাবে এবং ব্যান্ডউইথের অপচয়ও হবে না।

Lazy Loading এর উদাহরণ:

<!DOCTYPE html>
<html>
<head>
    <title>Lazy Load Google Map</title>
    <style>
        #map {
            height: 500px;
            width: 100%;
        }
        #mapContainer {
            height: 500px;
            width: 100%;
            background-color: #f0f0f0;
        }
    </style>
</head>
<body>
    <h3>Lazy Loading Google Maps</h3>
    <div id="mapContainer">
        <button onclick="loadMap()">Load Map</button>
        <div id="map"></div>
    </div>

    <script>
        var map;

        function loadMap() {
            var script = document.createElement('script');
            script.src = "https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap";
            document.body.appendChild(script);
        }

        function initMap() {
            map = new google.maps.Map(document.getElementById('map'), {
                zoom: 12,
                center: {lat: 23.8103, lng: 90.4125} // ঢাকার অবস্থান
            });
        }
    </script>
</body>
</html>

ব্যাখ্যা:

এখানে mapContainer একটি কন্টেইনার হিসেবে ব্যবহার হয়েছে যার মধ্যে একটি "Load Map" বাটন রয়েছে।
যখন ব্যবহারকারী বাটনে ক্লিক করবেন, তখন মানচিত্র লোড হবে এবং Google Maps API স্ক্রিপ্টটি সিলেক্টেড ডিভে অ্যাড করা হবে।

Asynchronous Loading

Asynchronous Loading হল একটি কৌশল যার মাধ্যমে পেজের অন্যান্য অংশ লোড হওয়ার সাথে সাথে Google Maps API এর স্ক্রিপ্ট লোড করা হয়। এর মাধ্যমে পেজের অন্যান্য উপাদান রেন্ডার হতে থাকে এবং মানচিত্রের স্ক্রিপ্ট লোডের জন্য অপেক্ষা করতে হয় না। এটি পেজ লোডিংয়ের গতি বাড়াতে সহায়ক।

Asynchronous Loading এর উদাহরণ:

<!DOCTYPE html>
<html>
<head>
    <title>Asynchronous Loading Google Map</title>
    <style>
        #map {
            height: 500px;
            width: 100%;
        }
    </style>
</head>
<body>
    <h3>Asynchronous Loading Google Map</h3>
    <div id="map"></div>

    <script>
        function initMap() {
            var map = new google.maps.Map(document.getElementById('map'), {
                zoom: 12,
                center: {lat: 23.8103, lng: 90.4125} // ঢাকার অবস্থান
            });
        }

        // Asynchronous Loading
        function loadGoogleMaps() {
            var script = document.createElement('script');
            script.src = "https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap";
            script.async = true;
            script.defer = true;
            document.body.appendChild(script);
        }

        window.onload = loadGoogleMaps; // স্ক্রিপ্ট লোড করার জন্য window.onload ব্যবহার করা হয়েছে।
    </script>
</body>
</html>

ব্যাখ্যা:

এখানে script.async = true এবং script.defer = true ব্যবহার করা হয়েছে যাতে স্ক্রিপ্টটি অ্যাসিঙ্ক্রোনাসলি লোড হয় এবং মানচিত্র লোড হতে থাকা অবস্থায় পেজের অন্যান্য অংশ লোড হতে থাকে।
স্ক্রিপ্টটি লোড হওয়ার পর initMap() ফাংশনটি কল হবে এবং মানচিত্রটি প্রদর্শিত হবে।